<template>
    <div class="class-list ">
        <el-form :inline="true" :model="form" class="t-form gray t-class-list">
            <div>
                <el-form-item label="">
                    <el-select v-model="form.baseSectionId" placeholder="年级">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="item in condition.gradeObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="form.baseTrimesterId" placeholder="学期">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="item in condition.termObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.baseLevelId" placeholder="班型">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="item in condition.levelObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.schoolId" placeholder="校区">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="item in school.schoolObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item>
                <el-select v-model="form.dataSubject" placeholder="请选择学科">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in condition.subjectList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="form.status" placeholder="开课状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="未开课" :value="0"></el-option>
                    <el-option label="开课中" :value="1"></el-option>
                    <el-option label="已结课" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="form.student" placeholder="学生名/学生ID"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input class="s-input" v-model="form.name" placeholder="班级名称/课程名称/任课教师"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" class="search-btn">查询</el-button>
                <el-button v-if="config.class_add" type="primary" @click="$router.push('/main/system/class/add')">新增班级</el-button>
            </el-form-item>
            <el-form-item class="new-item">
                <el-button v-if="config.class_export_feedback" type="primary" class="new-btn" @click="showDialog=true;exportType='feedback'">反馈导出</el-button>
            </el-form-item>
            <el-form-item class="new-item ach-out">
                <el-button v-if="config.class_export_report" type="primary" class="new-btn" @click="showDialog=true;exportType='achieve'">成绩导出</el-button>
            </el-form-item>
        </el-form>
        <el-table class="line-table" :data="classes.classObj.list" style="width: 100%" header-align="center" empty-text="暂无班级，请先添加班级">
            <el-table-column prop="className" label="班级名称" align="center" width="160" fixed>
                <template scope="scope">
                    <template v-if="scope.row.hasLessonPermit===1">
                        <router-link class="btn-edit" v-if="config.class_detail" :to="'/main/system/class/details?id='+scope.row.id">
                            {{scope.row.className}}
                        </router-link>
                        <span v-else>{{scope.row.className}}</span>
                    </template>
                    <span v-else @click="$message('该班级使用的课程已到期')">{{scope.row.className}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="num" label="班级编号" align="center" width="100"></el-table-column>
            <el-table-column prop="baseLevelName" label="班型" align="center" width="100"></el-table-column>
            <el-table-column prop="trimester" label="学期" align="center" width="100"></el-table-column>
            <el-table-column prop="lessonName" label="课程" align="center" width="200">
                <template scope="scope">
                    <router-link tag="span" style="cursor:pointer" v-if="config.chapter_edit&&scope.row.lessonType===1" :to="{path:'/main/teach-research/course/edit-lecture/'+scope.row.lessonId}">{{scope.row.lessonName}}</router-link>
                    <span v-else>{{scope.row.lessonName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="subject" label="学科" align="center"></el-table-column>
            <el-table-column label="开课状态" align="center">
                <template scope="scope">
                    {{scope.row.status===0?'未开课':scope.row.status===1?'开课中':'已结课'}}
                </template>
            </el-table-column>
            <el-table-column prop="section" label="年级" align="center"> </el-table-column>
            <el-table-column label="任课教师" align="center">
                <template scope="scope">
                    <span v-for="(item,index) in scope.row.teacherList" :key="index">
                        {{item.username}}
                        <span v-if="index != (scope.row.teacherList.length-1)">、</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="school" label="所属校区" align="center" width="160"> </el-table-column>
            <el-table-column label="操作" align="center" min-width="260" fixed="right">
                <template slot-scope="scope">
                    <router-link :to="{path:'/main/system/class/student-list',query:{id:scope.row.id,oId:scope.row.oId}}">
                        <span class="btn-edit" v-if="config.class_stu_list">学生列表</span>
                    </router-link>
                    <span class="btn-edit" v-if="config.class_exam_input" @click="setScore(scope.row)">诊断录分</span>
                    <div v-if="scope.row.isSycn===1 && config.class_detail" class="opt-div">
                        <template v-if="scope.row.hasLessonPermit===1">
                            <router-link v-if="config.class_edit" :to="'/main/system/class/'+scope.row.id">
                                <span class="btn-edit">编辑</span>
                            </router-link>
                        </template>
                            <span v-else class="btn-edit" @click="$message('该班级使用的课程已到期')">编辑</span>
                        <span class="btn-edit" v-if="config.class_del" @click="deleteLessonClass(scope.row.id)">
                            删除
                        </span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <v-pagination ref="pagin" class="pag" :total="classes.classObj.total|toNumber" @getListResult="getClassList" :currentPage="form.pageIndex"></v-pagination>
        <select-module ref="sModule" type="start"></select-module>
        <el-dialog :title="exportType==='feedback'?'反馈导出':'成绩导出'" :visible.sync="showDialog">
            <el-form :model="oForm" class="o-form" label-width="90px">
                <el-form-item label="活动名称：" v-if="exportType==='achieve'">
                    <el-select placeholder="活动名称" v-model="oForm.activityIds" multiple>
                        <el-option v-for="item in actives.list" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="校区名称：">
                    <el-select v-model="oForm.schoolId" multiple :collapse-tags="true" placeholder="校区">
                        <el-option v-for="item in school.schoolObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学期：">
                    <el-select v-model="oForm.baseTrimesterId" placeholder="学期">
                        <el-option v-for="item in condition.termObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级：">
                    <el-select v-model="oForm.baseSectionId" multiple :collapse-tags="true" placeholder="年级">
                        <el-option v-for="item in condition.gradeObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学科：">
                    <el-select v-model="oForm.dataSubject" multiple :collapse-tags="true" placeholder="学科">
                        <el-option v-for="item in condition.subjectList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button class="light-btn" @click="exportTable">导出</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import VPagination from "../../common/Pagination"
import { mapState, mapActions, mapGetters } from 'vuex'
import io from 'lib/io'
import util from 'lib/util'
import storage from 'lib/storage'
import SelectModule from "./SelectModule"
export default {
    name: 'class-list',
    components: {
        VPagination,
        SelectModule
    },
    data() {
        return {
            options: [{
                value: 'c',
                label: 'c'
            }],
            oForm: {
                activityIds: [],
                schoolId: [],
                baseTrimesterId: '',
                baseSectionId: [],
                dataSubject: []
            },
            form: {
                baseSectionId: this.$route.query.baseSectionId || null,
                baseTrimesterId: this.$route.query.baseTrimesterId || null,
                lessonId: this.$route.query.lessonId || null,
                baseLevelId: this.$route.query.baseLevelId || null,
                schoolId: null,
                status: this.$route.query.status || null,
                student: '',
                name: '',
                dataSubject: null,
                tag: 2,
                pageIndex: 1,
                pageSize: 10
            },
            showScore: false,
            examList: [],
            activeClassId: '',
            showDialog: false,
            actives: {},
            exportType: ''
        }
    },
    computed: {
        ...mapState(['classes', 'condition', 'school']),
        ...mapGetters(['config'])
    },
    async created() {
        this.findBaseLevelPage({ pageIndex: 1, pageSize: 10000000 })
        this.getActiveList()
        let cond = sessionStorage.getItem('classCond')
        if (cond) {
            this.form = JSON.parse(cond)
        }
        this.getClass()
        Promise.all([
            this.findBaseTermPage({ pageIndex: 1, pageSize: 10000000 }),
            this.findBaseSchoolPage({ pageIndex: 1, pageSize: 10000000, tag: 2 }),
            this.findSubjectsData({ pageIndex: 1, pageSize: 10000000 }),
            this.findBaseSectionPage({ pageIndex: 1, pageSize: 10000000 })
        ]).then(() => {
            this.oForm.baseTrimesterId = this.condition.termObj && this.condition.termObj.list[0].id
            this.school.schoolObj && this.school.schoolObj.list.map((item, i) => {
                this.oForm.schoolId.push(item.id)
            })
            this.condition.subjectList && this.condition.subjectList.map((item, i) => {
                this.oForm.dataSubject.push(item.id)
            })
            this.condition.gradeObj && this.condition.gradeObj.list.map((item, i) => {
                if (item.name === '高一' || item.name === '高二' || item.name === '高三') {
                    this.oForm.baseSectionId.push(item.id)
                }
            })
        })
    },
    beforeRouteEnter(to, from, next) {
        if (!(from.path.indexOf('/main/system/class') > -1)) {
            sessionStorage.removeItem('classCond')
        }
        next()
    },
    mounted() {
        this.$refs.pagin.changePage(this.form.pageIndex)
    },
    methods: {
        ...mapActions(['findClassPage', 'findBaseSectionPage', 'findBaseTermPage', 'findBaseLevelPage', 'findBaseSchoolPage', 'findSubjectsData']),
        async setScore(row) {
            let { data } = await io.post6(io.findClaStudentPage, { lessonClassId: row.id, pageIndex: 1, pageSize: 10 })
            if (data.success) {
                if (data.data && data.data.list.length) {
                    this.$refs.sModule.getActiveList(row)
                } else {
                    this.$message('该班级暂无学生')
                }
            }
        },
        exportTable() {
            if (!this.oForm.schoolId.length) {
                this.$message('请选择校区')
                return
            }
            this.showDialog = false
            if (this.exportType === 'feedback') {
                window.open(`${io.feedbackExport}?baseSchoolIds=${this.oForm.schoolId.join(',')}&baseTrimesterId=${this.oForm.baseTrimesterId}&baseSectionIds=${this.oForm.baseSectionId.join(',')}&dataSubjectIds=${this.oForm.dataSubject.join(',')}&accessToken=${storage.getAccessToken()}`)
            } else {
                window.open(`${io.examReportExport}?examModelActivityIds=${this.oForm.activityIds.join(',')}&baseSchoolIds=${this.oForm.schoolId.join(',')}&baseTrimesterId=${this.oForm.baseTrimesterId}&baseSectionIds=${this.oForm.baseSectionId.join(',')}&dataSubjectIds=${this.oForm.dataSubject.join(',')}&accessToken=${storage.getAccessToken()}`)
            }
        },
        async getActiveList() {
            let { data } = await io.post6(io.examModelActivityList, { pageIndex: 1, pageSize: 1000000, isUse: 1 })
            if (data.success) {
                this.actives = data.data
                this.oForm.activityIds = data.data.list[0] && [data.data.list[0].id]
            }
        },
        getClassList(opt) {
            this.form = { ...this.form, ...opt }
            this.getClass()
        },
        getClass(opt) {
            this.findClassPage({ ...this.form, ...opt })
        },
        search() {
            this.$refs.pagin.changePage(1)
            this.form.pageIndex = 1
            this.getClass()
        },
        //删除班级
        deleteLessonClass(id) {
            let param = {
                id: id
            }
            this.$confirm('确定删除该班级?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                io.post(io.deleteLessonClass, param, (data) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功！'
                    });
                    this.getClass()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })
        }
    },
    beforeDestroy() {
        sessionStorage.setItem('classCond', JSON.stringify(this.form))
    }

}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.class-list
    padding-bottom 50px
.t-form
    table-form()
    margin-top 20px
    margin-bottom 30px
    .el-form-item
        margin-bottom 10px
.el-select
    width 190px
.line-table
    .btn-edit{
        cursor: pointer;
        color: #0084bb;
        padding: 0 5px;
        display: inline-block;
    }
.set-score
    cursor pointer
    &:hover
        color #0084bb
.t-class-list
    padding-bottom 10px
    .el-form-item.new-item
         bottom 18px
         margin-right 10px
    .ach-out
        bottom 70px !important
.opt-div
    display inline-block
.btn
    margin-bottom 0
.o-form
    width 500px
    margin 30px auto 0
    text-align center
    .el-select
        width 100%
.s-input
    width 225px
</style>


